(function () {
    var SPARKLINE_HISTORY_LENGTH = 100;
    var SPARKLINE_COLORS = ["#62f965", "#FFFFFF", "#B3B4B4", "#6B6B6B", "#28DE28", "#13F7F9", "#E6EE18", "#C41204", "#CA3CB8", "#0B1CFB"];

    function easeTransitionText(newValue, textElement, duration) {

        var currentValue = $(textElement).text();

        if (currentValue == newValue)
            return;

        if ($.isNumeric(newValue) && $.isNumeric(currentValue)) {
            var numParts = newValue.toString().split('.');
            var endingPrecision = 0;

            if (numParts.length > 1) {
                endingPrecision = numParts[1].length;
            }

            numParts = currentValue.toString().split('.');
            var startingPrecision = 0;

            if (numParts.length > 1) {
                startingPrecision = numParts[1].length;
            }

            jQuery({
                transitionValue: Number(currentValue),
                precisionValue: startingPrecision
            }).animate({transitionValue: Number(newValue), precisionValue: endingPrecision}, {
                duration: duration,
                step: function () {
                    $(textElement).text(this.transitionValue.toFixed(this.precisionValue));
                },
                done: function () {
                    $(textElement).text(newValue);
                }
            });
        } else {
            $(textElement).text(newValue);
        }
    }

    function addSparklineLegend(element, legend) {
        var legendElt = $("<div class='sparkline-legend'></div>");
        for (var i = 0; i < legend.length; i++) {
            var color = SPARKLINE_COLORS[i % SPARKLINE_COLORS.length];
            var label = legend[i];
            legendElt.append("<div class='sparkline-legend-value'><span style='color:" +
                color + "'>&#9679;</span>" + label + "</div>");
        }
        element.empty().append(legendElt);

        freeboard.addStyle('.sparkline-legend', "margin:5px;");
        freeboard.addStyle('.sparkline-legend-value',
            'color:white; font:10px arial,san serif; float:left; overflow:hidden; width:50%;');
        freeboard.addStyle('.sparkline-legend-value span',
            'font-weight:bold; padding-right:5px;');
    }

    function addValueToSparkline(element, value, legend) {
        var values = $(element).data().values;
        var valueMin = $(element).data().valueMin;
        var valueMax = $(element).data().valueMax;
        if (!values) {
            values = [];
            valueMin = undefined;
            valueMax = undefined;
        }

        var collateValues = function (val, plotIndex) {
            if (!values[plotIndex]) {
                values[plotIndex] = [];
            }
            if (values[plotIndex].length >= SPARKLINE_HISTORY_LENGTH) {
                values[plotIndex].shift();
            }
            values[plotIndex].push(Number(val));

            if (valueMin === undefined || val < valueMin) {
                valueMin = val;
            }
            if (valueMax === undefined || val > valueMax) {
                valueMax = val;
            }
        }

        if (_.isArray(value)) {
            _.each(value, collateValues);
        } else {
            collateValues(value, 0);
        }
        $(element).data().values = values;
        $(element).data().valueMin = valueMin;
        $(element).data().valueMax = valueMax;

        var tooltipHTML = '<span style="color: {{color}}">&#9679;</span> {{y}}';

        var composite = false;
        _.each(values, function (valueArray, valueIndex) {
            $(element).sparkline(valueArray, {
                type: "line",
                composite: composite,
                height: "100%",
                width: "100%",
                fillColor: false,
                lineColor: SPARKLINE_COLORS[valueIndex % SPARKLINE_COLORS.length],
                lineWidth: 2,
                spotRadius: 3,
                spotColor: false,
                minSpotColor: "#78AB49",
                maxSpotColor: "#78AB49",
                highlightSpotColor: "#9D3926",
                highlightLineColor: "#9D3926",
                chartRangeMin: valueMin,
                chartRangeMax: valueMax,
                tooltipFormat: (legend && legend[valueIndex]) ? tooltipHTML + ' (' + legend[valueIndex] + ')' : tooltipHTML
            });
            composite = true;
        });
    }


    var gaugeID = 0;

    //-----------------------------------------------------------------------
    // 20191210 Sunying 新增

    //  智慧运维总览 OPS=运维
    var eChartsOPSWidget = function (settings) {
        var ulOps = $('<ul class="ulOps clearfix"></ul>');
        var currentSettings = settings;
        var OPS;

        var creatElement = function () {
            var liOps = "";
            for (var i = 0; i < OPS.length; i++) {
                // var leftImg = "<img class='img-Ops' src='" + OPS[i].img + "'>";
                var leftImg = "<img class='img-Ops' src='img/Ops-1.png'>";
                var rightTxt = "<div class='div-Ops'>" + "<h1 class='h1-Ops'>" + OPS[i].title + "</h1>" +
                    "<p class='p-Ops'>" + OPS[i].data + "</p>" + "</div>";

                liOps += "<li class='liOps'>" + leftImg + rightTxt + "</li>";

            }
            ulOps.html(liOps);
            $('.liOps:eq(4) img').attr('src','img/Ops-2.png');
            $('.liOps:eq(5) img').attr('src','img/Ops-3.png');
            $('.liOps:eq(6) img').attr('src','img/Ops-4.png');
            $('.liOps:eq(7) img').attr('src','img/Ops-4.png');
        };
        this.render = function (element) {
            setTimeout(function () {
                $(element).append(ulOps);
                creatElement()
            }, 1000)
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            OPS = value;

            titleOps = value.title;
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };

        this.getHeight = function () {
            return Number(7)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "OPS",
        "display_name": "智慧运维总览",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsOPSWidget(settings));
        }
    });

    //  智慧运维设备总览 PDA=设备
    var eChartsPDAWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var pdaSum = $('<div class="pdaSum-div clearfix"></div>');
        var htmlElement = $('<div class="custom-widget bling2" style="width: 100%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:350px;"></div>' + '</div>');
        var currentSettings = settings;

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0)'
                    }
                },
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    color: "#fff",
                    fontSize: '14',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0)'
                    }
                },
                data: []
            },
            grid: {
                left: 100,
                top: 80,
            },
            title: {
                text: "设备比例",
                x: 'center',
                y: '10%',
                textStyle: {
                    color: '#73dcfe',
                    fontSize: '18',
                    fontWeight: "normal",
                    top: '30px',
                },
            },
            series: [
                { // For shadow
                    name:"设备总量",
                    type: 'bar',
                    barWidth: 22,
                    itemStyle: {
                        normal: {color: '#13257c'}
                    },
                    barGap:'-100%',
                    barCategoryGap:'40%',
                    data:[] ,
                    animation: false
                },
                {
                    name:"当前数量",
                    type: 'bar',
                    barWidth: 22,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#af185a'},
                                    {offset: 1, color: '#ca806e'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#ca806e'},
                                    {offset: 1, color: '#af185a'}
                                ]
                            )
                        }
                    },
                    label: {
                        show: true,
                        position: [216,5],
                        textStyle: {
                            color: "#fff",
                            fontSize: '14',
                        }
                    },
                    data: []
                }
            ]
        };
        var creatElement = function () {
            var sumL = "<div class='sumL'>" + "设备总数" + "</div>";
            var sumRTxt = "";
            var data = option.series[1].data;
            var allNum = 0;
            for (var j = 0; j < data.length; j++) {
                allNum += data[j];
            }
            allNum = "000" + allNum;
            while (true) {
                if (allNum.length <= 4) {
                    break;
                } else {
                    allNum = allNum.substring(1, allNum.length);
                }
            }

            for (var i = 0; i < 4; i++) {
                sumRTxt += "<li class='sumRTxt'>" + allNum.substring(i, i + 1) + "</li>";
            }
            var sumR = "<ul class='sumR'>" + sumRTxt + "</ul>";
            pdaSum.html(sumL + sumR);

            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);

            var index = 0;

            setInterval(function () {
                if(index==$(".liOps").length){index = 0;}
                $(".liOps").removeClass("animated").removeClass("pulse");
                $(".liOps:eq("+index+")").addClass("animated").addClass("pulse");
                index++;
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(pdaSum)
                .append(htmlElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option.series[1].data = value[1];
            option.yAxis.data = value[0];
            option.series[0].data = [];
            var allNum = 0;
            for (var j = 0; j < value[1].length; j++) {
                allNum += value[1][j];
            }
            for (var j = 0; j < value[1].length; j++) {
                option.series[0].data.push(allNum);
            }
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(8)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "PDA",
        "display_name": "智慧运维设备总览",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsPDAWidget(settings));
        }
    });

    //  告警统计
    var eChartsStatsWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var alarmHandling = $('<div class="alarmHandling-div"></div>');
        var htmlElement = $('<div class="custom-widget">' + '<div class="custom-wrapper statistics" id="' + thisGaugeID + '" style="height:166px;"></div>' + '</div>');
        var textElement = $('<ul class="numText"></ul>');
        var currentSettings = settings;
        var dealWith;
        var untreated;
        var processingRate;
        var nameText;
        var numText;

        var option = {
            color: ['#d5c903','#d91451', '#00ffea', '#2eb100'],
            series: [
                {
                    type: 'pie',
                    radius: ['52%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    center: ['50%', '50%'],
                    data: []
                }
            ]
        };

        var creatElement = function (mydata) {
            var dispose = "";
            dispose += "<div class='disposeDiv'>" + "已处理告警" + "<span class='greenColor'>" + dealWith + "件" + "</span>" + "</div>" +
                "<div class='disposeDiv'>" + "未处理告警" + "<span class='redColor'>" + untreated + "件" + "</span>" + "</div>" +
                "<div class='disposeDiv'>" + "告警处理率" + "<span class='blueColor'>" + processingRate + "%" + "</span>" + "</div>";
            alarmHandling.html(dispose);

            var numTextLi = "";
            for (var dataKey in mydata) {
                var numColor = "<span class='numColor'>" + "</span>";
                var numName = "<span class='numName'>" + mydata[dataKey].name + "</span>";
                var numTxt = "<span class='numTxt'>" + mydata[dataKey].value + "</span>";
                numTextLi += "<li class='numTextLi clearfix'>" + numColor + numName + numTxt + "个" + "</li>";
            }
            textElement.html(numTextLi);

            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(alarmHandling)
                .append(htmlElement)
                .append(textElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            stats = value;

            dealWith = value.dealWith;
            untreated = value.untreated;
            processingRate = value.processingRate;
            option.series[0].data = value.data;
            nameText = value.data[0].name;
            creatElement(value.data)
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(3.5)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "Internet",
        "display_name": "告警统计",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsStatsWidget(settings));
        }
    });

    // 告警信息
    var eChartsAlertingWidget = function (settings) {
        var tableTag = $('<div id="table_1"></div>');
        var currentSettings = settings;
        var tableData;
        var tableTb = $('<div id="box"></div>');
        var week = '';
        var month = '';
        var tdData = null;
        var creatTable = function (data) {
            tdData = "";
            for (var dataKey in data) {
                var lineList = data[dataKey]
                if (lineList[0] == '中级') {
                    tdData += "<div class='td-color alarmCategory clearfix'>";

                    tdData += "<span class='alarmColor' style='color:#00ffea;'>" + "[" + lineList[0] + "]" + "</span>";
                    tdData += "<span class='alarmTxt'>" + lineList[1] + "</span>";

                    tdData += "</div>"
                } else if (lineList[0] == '高级') {
                    tdData += "<div class='td-color alarmCategory clearfix'>";

                    tdData += "<span class='alarmColor' style='color: #d91451'>" + "[" + lineList[0] + "]" + "</span>";
                    tdData += "<span class='alarmTxt'>" + lineList[1] + "</span>";

                    tdData += "</div>"
                } else if (lineList[0] == '低级') {
                    tdData += "<div class='td-color alarmCategory clearfix'>";

                    tdData += "<span class='alarmColor' style='color: #5cca78'>" + "[" + lineList[0] + "]" + "</span>";
                    tdData += "<span class='alarmTxt'>" + lineList[1] + "</span>";

                    tdData += "</div>"
                } else {
                    tdData += "<div class='td-color alarmCategory clearfix'>";

                    tdData += "<span class='alarmColor' style='color: #fff000'>" + "[" + lineList[0] + "]" + "</span>";
                    tdData += "<span class='alarmTxt'>" + lineList[1] + "</span>";

                    tdData += "</div>"
                }

            }
        };
        var move = function () {
            var marginTop = 0;
            var times = setInterval(function () {
                $('#box').children('.td-color').first().animate({"margin-top": marginTop--}, 0, function () {
                    if (!$(this).is(':animated')) {
                        if (-marginTop > $(this).height()) {
                            $(this).css("margin-top", "0px").appendTo($("#box"));
                            marginTop = 0;
                        }
                    }
                })
            }, 40);
            $("#box").hover(function(){
                clearInterval(times);
            },function(){
                times = setInterval(function () {
                    $('#box').children('.td-color').first().animate({"margin-top": marginTop--}, 0, function () {
                        if (!$(this).is(':animated')) {
                            if (-marginTop > $(this).height()) {
                                $(this).css("margin-top", "0px").appendTo($("#box"));
                                marginTop = 0;
                            }
                        }
                    })
                }, 40);
            });
        };
        this.render = function (element) {
            $(element).empty();
            setTimeout(function () {
                tableTb.html(tdData);
                $(tableTag)
                    .append(tableTb);
                $(element).append(tableTag);
                move()
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {


            tableData = newValue.table;
            week = newValue.week;
            month = newValue.month;
            creatTable(newValue.table);
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(1.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "Alerting",
        display_name: "告警信息",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsAlertingWidget(settings));
        }
    });

    // 专线线路总流量
    var eChartsPrivateLineWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var PrivateLineTitle;
        var privateTitle = $('<div class="privateTitle" style="width: 100%">' + '</div>');
        var htmlElement = $('<div class="custom-widget" style="width: 100%">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:134px;"></div>' + '</div>');
        var textElement = $('<ul class="numText"></ul>');
        var currentSettings = settings;

        var option = {
            color:['#62f965','#ffed6c', '#ff511b', '#c540f0', '#8240f0','#407af0','#00ffea', '#40f0b4','#acf040', '#f0ac40'],
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '20',
                right: '30',
                top:'10',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: "#fff",
                    fontSize: '12',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },

                data : []
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: "#fff",
                    fontSize: '12',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#263060']
                    }
                },
            },
            series : []
        };

        var creatElement = function (mydata) {
            setTimeout(function () {
                privateTitle.html(PrivateLineTitle);

                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(privateTitle)
                .append(htmlElement)
                .append(textElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            PrivateLine = value;
            PrivateLineTitle = value.PrivateName;
            option.xAxis.data = value.xData;
            option.series=[];
            for(var i =0;i<value.data.length;i++){

                // var r = Math.floor(Math.random()*256);
                // var g = Math.floor(Math.random()*256);
                // var b = Math.floor(Math.random()*256);
                // var rgb = 'rgb('+r+','+g+','+b+')';

                if(value.data[i]){
                    option.series.push({
                        name:value.data[i].name,
                        type:'line',
                        smooth:true,
                        symbol: 'circle',
                        stack: '总量',
                        // itemStyle: {
                        //     normal: {
                        //         color: rgb
                        //     }
                        // },
                        areaStyle: {
                            normal: {
                            color:'rgba(106,250,104,.1)',
                            }
                        },
                        data:value.data[i].value
                    })
                }
            }
            creatElement(value.data)
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(3)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "PrivateLine",
        "display_name": "专线线路总流量",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsPrivateLineWidget(settings));
        }
    });

    // 业务健康情况
    var eChartsHealthyWidget = function (settings) {
        var tableTag = $('<div class="scatterPlot" style="position: relative;left: 10px;padding: 0; margin-top: 10px;"></div>');
        var currentSettings = settings;
        var splashesLine = null;
        var creatTable = function (data) {

            //业务健康情况 数据
            splashesLine = "";
            splashesLine += writeCircle("网络", data.network);     //网络的数据
            splashesLine += writeCircle("主机", data.Host);//主机的数据
            splashesLine += writeCircle("应用", data.app);//应用的数据
            splashesLine += writeCircle("数据库", data.database);//数据库的数据
            // 下方X轴data排列数据
            var width=100/data.network.length+'%';
            splashesLine += "<div class='y-circle clearfix' style='width: 100%;margin-left: 11px;color: #fff' >";
            splashesLine += "<div style='float: left;width: 50px'>&nbsp;</div>";
            splashesLine += "<div class='clearfix' style='width: 1270px;float: left'>";
            for (var dataKey in data.network) {
                splashesLine += "<div  style='width: "+width+";float:left;text-align: center'>";
                splashesLine += "<div class='my-circle-text' >";
                splashesLine += data.network[dataKey].name;
                splashesLine += "</div>"
                splashesLine += "</div>";
            }
            splashesLine +="</div>";
            splashesLine +="</div>";
        };

        var writeCircle = function (title, data) {
            var str = ""
            str += "<div class='y-circle clearfix' style='width: 100%;margin-bottom: 16px;'>";
            str += "<div style='float: left;width: 50px; text-align: right;margin-right: 10px; color: #fff'>"+title+"</div>";
            str += "<div class='clearfix' style='width: 1270px;float: left'>";
            var width=100/data.length+'%';
            for (var dataKey in data) {
                var myClass='';
                var value = data[dataKey].value;
                var style = '';
                var title = '';

                if(data[dataKey].value== -1){
                    myClass= 'my-circle-text' ;
                    value = '空';
                    style='style="display:none;"'
                } else {
                    if (data[dataKey].type == 3||data[dataKey].type == 5) {
                        myClass= 'my-circle-orange' ;
                        title = data[dataKey].msg;

                        if(!title){
                            title = "未知设备";
                        }
                        title+="出现故障！";
                    } else if (data[dataKey].type == 1||data[dataKey].type == 4) {
                        myClass= 'my-circle-acidBlue' ;
                    } else {
                        myClass= 'my-circle-stoneBlue' ;
                    }
                }

                str += "<div  style='width: "+width+";float:left;text-align: center'>";
                str += "<div class='"+myClass+"' "+style+" title='"+title+"'>";
                str += value;
                str += "</div>";
                if (dataKey!=data.length-1)
                {
                    str+="<hr>";
                }
                str += "</div>"
            }
            str += "</div>"
            str += "</div>"
            return str;
        };
        this.render = function (element) {
            $(element).empty();
            setTimeout(function () {
                tableTag.html(splashesLine);
                $(element).append(tableTag);
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            creatTable(newValue);
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(5.7);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "Healthy",
        display_name: "业务健康情况",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsHealthyWidget(settings));
        }
    });

    // 轮播图
    var eChartsCarouselWidget = function (settings) {
        var carouselBox = $('<div class="carouselBox clearfix"></div>');
        var carouselUl = $('<ul class="carouselUl clearfix"></ul>');
        var currentSettings = settings;
        var Carousel;
        var carouselTimes;

        var move = function () {
            clearInterval(carouselTimes);
            var index = 0;
            carouselTimes = setInterval(function () {
                var cloneLi;
                if(index>0){
                    cloneLi = $(".carouselLi:eq("+(index-1)+")").clone();
                    $(".carouselLi:eq("+(index-1)+")").animate({"width":0},1000,function(){$(".carouselLi:last").after(cloneLi);});
                } else {
                    cloneLi = $(".carouselLi:eq(0)").clone();
                    $(".carouselLi:eq(0)").animate({"width":0},1000,function(){$(".carouselLi:last").after(cloneLi);});
                }
                index++;
            }, 3000);
            $(".carouselUl").hover(function(){
                clearInterval(carouselTimes);
            },function(){
                carouselTimes = setInterval(function () {
                    var cloneLi;
                    if(index>0){
                        cloneLi = $(".carouselLi:eq("+(index-1)+")").clone();
                        $(".carouselLi:eq("+(index-1)+")").animate({"width":0},1000,function(){$(".carouselLi:last").after(cloneLi);});
                    } else {
                        cloneLi = $(".carouselLi:eq(0)").clone();
                        $(".carouselLi:eq(0)").animate({"width":0},1000,function(){$(".carouselLi:last").after(cloneLi);});
                    }
                    index++;
                }, 3000);
            });
        };

        var creatElement = function () {
            var carouselLi = "";
            if(Carousel){
                for (var i = 0; i < Carousel.length; i++) {
                    // var disp = i>0?"style='display:none;'":"";
                    var Img = "<iframe class='carouselImg' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' ondragstart='return false;' style='width: 964px;height: 543px' src='"+Carousel[i]+"'></iframe>";
                    // carouselLi += "<li class='carouselLi' style='width: 964px;height: 543px' "+disp+">" + Img + "</li>";
                     carouselLi += "<li class='carouselLi' style='width: 964px;height: 543px;'>" + Img + "</li>";
                }
            }
            carouselUl.html(carouselLi);
            $(".carouselBox").parents('section').attr("style","position:absolute;");
            move();
        };
        // this.render = function (element) {
        //     setTimeout(function () {
        //         $(element).append(carouselBox);
        //         $(carouselBox).append(carouselUl);
        //         creatElement();
        //         move();
        //     }, 1000);
        // };
        this.render = function (element) {
            $(element).append(carouselBox);
            $(carouselBox).append(carouselUl);
            creatElement();
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            Carousel = value;
            titleOps = value.title;
            creatElement(value.data)
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(10)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "Carousel",
        "display_name": "拓扑图",
        "external_scripts": [
            "js/move.js"
        ],
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsCarouselWidget(settings));
        }
    });
}());
